import { Card, Form, Input, Checkbox, Button, message } from 'antd'
// import captchaImg from '@/assets/logo.png'
import { useNavigate } from 'react-router-dom'
// 导入样式文件
import './index.scss'
import { useStore } from '@/store'
import { http, randomStr20 } from '@/utils'
import { useEffect, useState } from 'react'
let uuid = randomStr20()

const Login = () => {
    const [captchaImg, setCaptchaImg] = useState('')
    useEffect(() => {
        // 获取验证码
        const getCaptcha = async () => {
            const data = await http.get('/invest/captcha.jpg?uuid=' + uuid, { responseType: "blob" })
            setCaptchaImg(window.URL.createObjectURL(data))
        }
        getCaptcha()
    }, [])
    const upImage = async () => {
        uuid = randomStr20()
        const data = await http.get('/invest/captcha.jpg?uuid=' + uuid, { responseType: "blob" })
        setCaptchaImg(window.URL.createObjectURL(data))
    }
    const { loginStore } = useStore()
    const navigate = useNavigate()

    async function onFinish (values) {
        console.log(values)
        // values：放置的是所有表单项中用户输入的内容
        const { username, password, captcha } = values
        // todo:登录
        const res = await loginStore.getToken({ username, password, captcha, uuid })
        if (res.code === 0) {
            // 跳转首页
            navigate('/', { replace: true })
            // 提示用户
            message.success('登录成功')
        } else {
            upImage()
        }

    }
    return (
        <div className="login">
            <Card className="login-container">
                <h3 className='title'>预警平台</h3>
                {/* <img className="login-logo" src={logo} alt="" /> */}
                {/* 登录表单 */}
                {/* 子项用到的触发事件 需要在Form中都声明一下才可以 */}
                <Form
                    validateTrigger={['onBlur', 'onChange']}
                    initialValues={{
                        remember: true,
                        username: '',
                        password: '',
                        captcha: ''
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名',
                            }
                        ]}
                    >
                        <Input size="large" placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            }
                        ]}
                    >
                        <Input.Password size="large" placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item
                        style={{
                            display: 'inline-block',
                            width: 'calc(50% - 12px)',
                        }}
                        name="captcha"
                        rules={[
                            {
                                required: true,
                                message: '请输入验证码',
                            }
                        ]}
                    >
                        <Input style={{ width: 180 }} size="large" placeholder="请输入验证码" />
                    </Form.Item>

                    <Form.Item
                        style={{
                            display: 'inline-block',
                            width: 'calc(50% - 12px)',
                        }}
                    >
                        <img
                            style={{ height: 40, verticalAlign: 'top', borderRadius: 5, marginLeft: 40 }}
                            className="captcha-img"
                            src={captchaImg}
                            onClick={upImage}
                            alt=""
                        />
                    </Form.Item>
                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                    >
                        <Checkbox className="login-checkbox-label">
                            我已阅读并同意「用户协议」和「隐私条款」
                        </Checkbox>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" size="large" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
export default Login